<template>
	<view class="personal-center-page">
	    <!-- 用户信息区域 -->
	    <view class="user-info">
	      <image class="avatar"  mode="aspectFill"></image>
	      <view class="user-text">
	        <view class="username">PDQ01</view>
	        <view class="role">监管者</view>
	      </view>
	    </view>
	
	    <!-- 功能列表 -->
	    <view class="function-list">
	      <view class="function-item" @click="goToModifyPwd">
	        <image class="function-icon"  mode="aspectFit"></image>
	        <view class="function-name">修改密码</view>
	        <u-icon name="arrow-right" size="28" color="#999"></u-icon>
	      </view>
	      <view class="function-item" @click="goToRelatePlatform">
	        <image class="function-icon"  mode="aspectFit"></image>
	        <view class="function-name">关联四川省追溯平台</view>
	        <u-icon name="arrow-right" size="28" color="#999"></u-icon>
	      </view>
	      <view class="function-item" @click="checkUpdate">
	        <image class="function-icon"  mode="aspectFit"></image>
	        <view class="function-name">软件更新</view>
	        <u-icon name="arrow-right" size="28" color="#999"></u-icon>
	      </view>
	      <view class="function-item" @click="logout">
	        <image class="function-icon"  mode="aspectFit"></image>
	        <view class="function-name">退出登录</view>
	        <u-icon name="arrow-right" size="28" color="#999"></u-icon>
	      </view>
	      <view class="function-item" @click="callHotline">
	        <image class="function-icon"  mode="aspectFit"></image>
	        <view class="function-name">咨询热线</view>
	        <u-icon name="arrow-right" size="28" color="#999"></u-icon>
	      </view>
	    </view>
	  </view>
	
	
	<view>
		<view class="tabbar" v-if="{roleFlag}">
			<u-tabbar
				:value="currentIndex"
				v-model="currentIndex"
				:fixed="true"
				:placeholder="false"
				:safeAreaInsetBottom="true"
				activeColor="#3cc51f">
			  <u-tabbar-item v-for="(item,index) in tablist" :key="index"
			  @click="switchTab(item)"
			  :text="item.text" :icon="item.name" :name="item.name" ></u-tabbar-item>
			</u-tabbar>
		</view>
		
		<view class="tabbar" v-else-if="{roleFlag}">
			<u-tabbar
				:value="currentIndex"
				v-model="currentIndex"
				:fixed="true"
				:placeholder="false"
				:safeAreaInsetBottom="true"
				activeColor="#c50003">
			  <u-tabbar-item v-for="(item,index) in tablist" :key="index"
			  @click="switchTab(item)"
			  :text="item.text" :icon="item.name" :name="item.name" ></u-tabbar-item>
			</u-tabbar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				role:"",
				roleFlag:undefined,
				currentIndex:"account",
				tablist: [
					{
						"pagePath": "pages/njt/supervisor/supervisorHome/supervisorHome",
						"name": "home",
						"text": "首页"
					},
					{
						"pagePath": "pages/njt/supervisor/supervisorInfo/supervisorInfo",
						"name": "account",
						"text": "个人"
					}
				]
			}
		},
		onLoad() {
			uni.hideTabBar()
		},
		methods: {
			roleJudge(){
				let roles = useStore.$state.role
				if(roles === "supervisor"){
					this.roleFlag = 1
				}
				else{
					this.roleFlag = 0
				}
			},
			switchTab(item){
				uni.switchTab({
					url:"/"+item.pagePath,
				})
			}
		}
	}
</script>

<style scoped>
.personal-center-page {
  background-color: #fff;
  min-height: 100vh;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 32rpx 24rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 24rpx;
}

.user-text {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.role {
  font-size: 24rpx;
  color: #fff;
  background-color: #00b341;
  padding: 4rpx 16rpx;
  border-radius: 16rpx;
  width: fit-content;
}

.function-list {
  padding: 0 24rpx;
}

.function-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 0;
  border-bottom: 1rpx solid #e5e5e5;
}

.function-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 24rpx;
}

.function-name {
  flex: 1;
  font-size: 28rpx;
}

.arrow {
  width: 24rpx;
  height: 24rpx;
  opacity: 0.5;
}
</style>